<template>
  <d-scroll-view  @refresherrefresh="getDetail" :refresher-triggered="triggered">
    <proj-detail-layout :process-instance-id="processInstanceId" :project-number="projectNumber">
    <d-forms label-width="200rpx">
      <d-forms-item label="销售经理">
        <pm-user-select disabled :user-id="form.salesManager"></pm-user-select>
      </d-forms-item>
      <d-forms-item label="售前工程师" :input="form.presaleName"></d-forms-item>
      <d-forms-item label="项目目标" :input="form.projectTarget"></d-forms-item>
      <d-forms-item label="项目范围" :input="form.projectRange"></d-forms-item>
      <view>
        <text class="form-title-1">项目计划</text>
        <d-card>
          <text style="white-space: pre-wrap">{{ form.projectPlan }}</text>
        </d-card>
      </view>
      <view v-if="form.personnels">
        <text class="form-title-1">人员安排</text>
        <d-card v-for="(personnel, idx) in form.personnels" class="personnel-card" :key="`personnel_${idx}`">
          <d-forms disabled label-width="160rpx">
            <d-forms-item label="角色" :input="personnel.postName"></d-forms-item>
            <d-forms-item label="人员" :input="personnel.userName"></d-forms-item>
            <d-forms-item label="任务描述" :input="personnel.task"></d-forms-item>
          </d-forms>
        </d-card>
      </view>
      <view>
        <text class="form-title-1">资料上传</text>
        <d-card>
          <pm-file-upload readonly v-model:files="form.materialUrl"></pm-file-upload>
        </d-card>
      </view>
    </d-forms>
  </proj-detail-layout>
  </d-scroll-view>
</template>

<script setup lang="ts">
import ProjDetailLayout from "@/components/ProjDetailLayout/index.vue";
import {useProjectReviewApi} from "@/api/pm/project/projectReview";
import PmFileUpload from "@/components/PmFileUpload/index.vue";

defineOptions({ name: 'ProjectReview' })

const initForm = {
  projectNumber: null,
  projectTarget: null,
  projectRange: null,
  projectPlan: null,
  storaged: null,
  id: null,
  isModifier: null,
  personnels: null,
  resultCause: null,
  projectName: null,
  projectManager: null,
  salesManager: null,
  salesManagerName: null,
  presaleName: null,
  materialUrl: null,
  processInstanceId: null,
  result: null,
}
const form = ref<ProjectReviewForm>(initForm)
const triggered = ref<boolean>(false);
function getDetail() {
  if (projectNumber.value) {
    triggered.value = true;
    useProjectReviewApi().getEvaluate(projectNumber.value).then((res) => {
      if (res.code === 0 && res.data) {
        form.value = res.data;
      }
    }).finally(() => {
      triggered.value = false;
    })
  }
}

const projectNumber = ref<string>(null);
const processInstanceId = ref<string>(null);
onLoad((query) => {
  projectNumber.value = query['project_number']
  processInstanceId.value = query['process_instance_id']
  getDetail();
})
</script>

<style scoped lang="scss">
.personnel-card {
  margin-bottom: 30rpx;

  &:last-child {
    margin-bottom: 0;
  }
}
</style>
